<!-- File: TransactionForm.vue -->
<script setup>
import { ref } from 'vue'
import { predict } from '@/api/fraud'

// =============== 响应式数据区域 ===============
const userId = ref('')
const transactionAmount = ref('')
const transactionType = ref('')
const accountBalance = ref('')
const deviceType = ref('')
const locationRef = ref('')
const merchantCategory = ref('')
const ipAddressFlag = ref(0)
const previousFraudulentActivity = ref(0)
const dailyTransactionCount = ref('')
const avgTransactionAmount7d = ref('')
const failedTransactionCount7d = ref('')
const cardAge = ref('')
const transactionDistance = ref('')
const riskScore = ref('')
const isWeekend = ref(0)
const fraudLabel = ref(0)  // 0: 非欺诈, 1: 欺诈

// =============== 下拉框选项区域 ===============
const transactionTypeOptions = [
  'Pos',
  'Bank Transfer',
  'Online',
  'ATM Withdrawal'
]

const deviceTypeOptions = ['Laptop', 'Mobile', 'Tablet']

const locationOptions = [
  'Sydney',
  'NewYork',
  'Mumbai',
  'Tokyo',
  'London'
]

const merchantCategoryOptions = [
  'Travel',
  'Clothing',
  'Restaurants',
  'Electronics',
  'Groceries'
]

const ipAddressFlagOptions = [0, 1]
const previousFraudulentActivityOptions = [0, 1]
const failedTransactionCount7dOptions = [0, 1, 2, 3, 4]
const isWeekendOptions = [0, 1]
const fraudLabelOptions = [0, 1]

const dailyTransactionCountOptions = [1, 2, 3, 4, 6, 7, 8, 10, 11, 12, 13, 14, 95]
const cardAgeOptions = [
  3, 5, 24, 47, 51, 65, 76, 91, 124, 131, 135, 136, 140, 168, 182,
  186, 192, 195, 226, 291, 292, 0, 41, 73, 80, 165
]

// =============== 表单提交区域 ===============
const submitForm = async () => {
  try {
    // 将表单数据汇总成一个对象
    const payload = {
      user_id: userId.value,
      transaction_amount: transactionAmount.value,
      transaction_type: transactionType.value,
      account_balance: accountBalance.value,
      device_type: deviceType.value,
      location: locationRef.value,
      merchant_category: merchantCategory.value,
      ip_address_flag: ipAddressFlag.value,
      previous_fraudulent_activity: previousFraudulentActivity.value,
      daily_transaction_count: dailyTransactionCount.value,
      avg_transaction_amount_7d: avgTransactionAmount7d.value,
      failed_transaction_count_7d: failedTransactionCount7d.value,
      card_age: cardAge.value,
      transaction_distance: transactionDistance.value,
      risk_score: riskScore.value,
      is_weekend: isWeekend.value,
      fraud_label: fraudLabel.value
    }

    console.log('准备发送的数据: ', payload)
    // 发送到后端接口
    const response = await predict(payload)
    console.log('后端返回结果: ', response)
    alert('预测请求已发送，后端返回：' + JSON.stringify(response))
  } catch (err) {
    console.error('提交表单失败：', err)
    alert('提交失败，请查看控制台错误信息')
  }
}
</script>

<template>
  <div class="container">
    <div class="form-card">
      <h2 class="title">交易信息表单</h2>
      <form class="transaction-form" @submit.prevent="submitForm">
        <!-- 用户ID -->
        <div class="form-group">
          <label for="userId">用户ID</label>
          <input id="userId" v-model="userId" type="number" />
        </div>

        <!-- 交易金额 transaction_amount -->
        <div class="form-group">
          <label for="transactionAmount">交易金额</label>
          <input
              id="transactionAmount"
              v-model="transactionAmount"
              type="number"
              step="0.01"
          />
        </div>

        <!-- 交易类型 transaction_type -->
        <div class="form-group">
          <label for="transactionType">交易类型</label>
          <select id="transactionType" v-model="transactionType">
            <option value="" disabled>请选择交易类型</option>
            <option
                v-for="type in transactionTypeOptions"
                :key="type"
                :value="type"
            >
              {{ type }}
            </option>
          </select>
        </div>

        <!-- 账户余额 account_balance -->
        <div class="form-group">
          <label for="accountBalance">账户余额</label>
          <input
              id="accountBalance"
              v-model="accountBalance"
              type="number"
              step="0.01"
          />
        </div>

        <!-- 设备类型 device_type -->
        <div class="form-group">
          <label for="deviceType">设备类型</label>
          <select id="deviceType" v-model="deviceType">
            <option value="" disabled>请选择设备类型</option>
            <option
                v-for="dType in deviceTypeOptions"
                :key="dType"
                :value="dType"
            >
              {{ dType }}
            </option>
          </select>
        </div>

        <!-- 地理位置 location -->
        <div class="form-group">
          <label for="location">地理位置</label>
          <select id="location" v-model="locationRef">
            <option value="" disabled>请选择交易地点</option>
            <option
                v-for="loc in locationOptions"
                :key="loc"
                :value="loc"
            >
              {{ loc }}
            </option>
          </select>
        </div>

        <!-- 商户类型 merchant_category -->
        <div class="form-group">
          <label for="merchantCategory">商户类型</label>
          <select id="merchantCategory" v-model="merchantCategory">
            <option value="" disabled>请选择商户类型</option>
            <option
                v-for="merchant in merchantCategoryOptions"
                :key="merchant"
                :value="merchant"
            >
              {{ merchant }}
            </option>
          </select>
        </div>

        <!-- 是否可疑IP ip_address_flag -->
        <div class="form-group">
          <label for="ipAddressFlag">IP是否可疑</label>
          <select id="ipAddressFlag" v-model="ipAddressFlag">
            <option v-for="flag in ipAddressFlagOptions" :key="flag" :value="flag">
              {{ flag === 0 ? '否' : '是' }}
            </option>
          </select>
        </div>

        <!-- 过去的欺诈活动次数 previous_fraudulent_activity -->
        <div class="form-group">
          <label for="previousFraudulentActivity">过去欺诈次数</label>
          <select
              id="previousFraudulentActivity"
              v-model="previousFraudulentActivity"
          >
            <option
                v-for="activity in previousFraudulentActivityOptions"
                :key="activity"
                :value="activity"
            >
              {{ activity }}
            </option>
          </select>
        </div>

        <!-- 当天交易次数 daily_transaction_count -->
        <div class="form-group">
          <label for="dailyTransactionCount">当天交易次数</label>
          <select id="dailyTransactionCount" v-model="dailyTransactionCount">
            <option value="" disabled>请选择当天交易次数</option>
            <option
                v-for="count in dailyTransactionCountOptions"
                :key="count"
                :value="count"
            >
              {{ count }}
            </option>
          </select>
        </div>

        <!-- 过去7天平均交易金额 avg_transaction_amount_7d -->
        <div class="form-group">
          <label for="avgTransactionAmount7d">过去7天平均交易金额</label>
          <input
              id="avgTransactionAmount7d"
              v-model="avgTransactionAmount7d"
              type="number"
              step="0.01"
          />
        </div>

        <!-- 过去7天失败交易次数 failed_transaction_count_7d -->
        <div class="form-group">
          <label for="failedTransactionCount7d">过去7天失败交易次数</label>
          <select
              id="failedTransactionCount7d"
              v-model="failedTransactionCount7d"
          >
            <option
                v-for="failCount in failedTransactionCount7dOptions"
                :key="failCount"
                :value="failCount"
            >
              {{ failCount }}
            </option>
          </select>
        </div>

        <!-- 卡的使用时长 card_age -->
        <div class="form-group">
          <label for="cardAge">卡的使用时长(月)</label>
          <select id="cardAge" v-model="cardAge">
            <option value="" disabled>请选择卡龄</option>
            <option
                v-for="age in cardAgeOptions"
                :key="age"
                :value="age"
            >
              {{ age }}
            </option>
          </select>
        </div>

        <!-- 交易距离 transaction_distance -->
        <div class="form-group">
          <label for="transactionDistance">交易距离(公里)</label>
          <input
              id="transactionDistance"
              v-model="transactionDistance"
              type="number"
              step="0.01"
          />
        </div>

        <!-- 风险评分 risk_score -->
        <div class="form-group">
          <label for="riskScore">风险评分</label>
          <input id="riskScore" v-model="riskScore" type="number" step="0.0001" />
        </div>

        <!-- 是否周末 is_weekend -->
        <div class="form-group">
          <label for="isWeekend">是否周末</label>
          <select id="isWeekend" v-model="isWeekend">
            <option
                v-for="weekendFlag in isWeekendOptions"
                :key="weekendFlag"
                :value="weekendFlag"
            >
              {{ weekendFlag === 0 ? '否' : '是' }}
            </option>
          </select>
        </div>

        <!-- 是否为欺诈交易 fraud_label -->
        <div class="form-group">
          <label for="fraudLabel">欺诈标志 (Fraud Label)</label>
          <select id="fraudLabel" v-model="fraudLabel">
            <option
                v-for="labelVal in fraudLabelOptions"
                :key="labelVal"
                :value="labelVal"
            >
              {{ labelVal === 0 ? 'Not Fraud' : 'Fraud' }}
            </option>
          </select>
        </div>

        <!-- 提交按钮 -->
        <button type="submit">提交预测</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
/* 外层容器 */
.container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh; /* 让背景铺满屏幕高度 */
}

/* 卡片外观 */
.form-card {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;          /* 卡片背景为白色 */
  border-radius: 8px;             /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  padding: 24px;
}

/* 标题 */
.title {
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
}

/* 表单本身：单列布局即可 */
.transaction-form {
  display: flex;
  flex-direction: column;
}

/* 每一个输入项的分组 */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

/* 标签 */
.form-group label {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

/* 输入框与下拉框 */
.form-group input,
.form-group select {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

/* 鼠标聚焦时的样式 */
.form-group input:focus,
.form-group select:focus {
  border-color: #42b983; /* Vue 绿色系，也可换成自己喜欢的色号 */
}

/* 提交按钮样式 */
button[type="submit"] {
  margin-top: 24px;
  padding: 12px;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

/* 悬停效果 */
button[type="submit"]:hover {
  background-color: #369973;
}
</style>
